<template>
<div id="app">
  <top-component :head="title" style="margin-top: 1rem;text-align: center;margin-right: 20px;"></top-component>
  <phone-component ref="phoneNumber" style="margin-top: 4rem;"></phone-component>
  <!-- 验证码 -->
  <code-componnet></code-componnet>
  <!-- 输入密码 -->
  <password-component :placeholder="placeholder"></password-component>
  <!-- 确认密码 -->
  <password-component :pwdTitle='pwdTitle' :placeholder="placeholder1"></password-component>
  <div class="REGIST">
    <el-button type="warning" round @click="Regist">注册</el-button><br>
  </div>
</div>
</template>

<script>
import TopComponent from './subComponent/top.vue'
import PhoneComponent from './subComponent/Phone.vue'
import PasswordComponent from './subComponent/Password.vue'
import CodeComponnet from './subComponent/Code.vue'
export default {
  data () {
    return {
      title: '注 册 账 号',
      pwdTitle: '确认密码',
      phoneNumber: '',
      isPhoneWrong: false,
      placeholder: '6-20字符内，字母与数字组合',
      placeholder1: '请重复您设置的密码'
    }
  },
  methods: {
    Regist () {
      console.log('注册完成，跳转程序页面')
      console.log('|')
      this.$router.replace({ path: '/Main' })
    }
  },
  watch: {
  },
  components: {
    TopComponent,
    PhoneComponent,
    PasswordComponent,
    CodeComponnet
  }
}
</script>
<style lang='scss'>
.REGIST {
  text-align: center;
  button {
    margin-top: 40px;
    width: 60%;
    margin-bottom: 20px;
    background: #E9BD8A;
  }
}
</style>
